<template>
  <div>
    <!-- 查询表单和按钮 -->
    <div class="search-form">
      <!-- 如果您需要两个日期输入框（例如开始日期和结束日期） -->



      <!-- 假设您只有一个日期输入框，例如用于查询特定日期的数据 -->
      <button @click="handleSearch">查询</button>
    </div>
    <vxe-table
        ref="xTable"
        resizable
        border
        v-loading="loading"
        :height="tableHeight"
        :expand-config="{iconOpen: 'vxe-icon-square-minus', iconClose: 'vxe-icon-square-plus'}"
        :data="tableData">
      <vxe-column type="seq" width="60" title="序号"></vxe-column>
      <vxe-column type="expand" title="布行面料编号" >
        <template #default="{ row }">
          <span>{{ row.product_code }}</span>
        </template>
        <template #content="{ row }">
          <div class="expand-wrapper">
            <vxe-table
                border
                v-loading="loading2"
                :data="rowData2Map[`${row.product_code}#${row.degree_of_staining_code}`]">
              <vxe-column type="seq" width="60" title="明细序号"></vxe-column>
              <vxe-column field="dyelot_code" title="缸号"></vxe-column>
              <vxe-column field="product_code" title="布行面料编号"></vxe-column>
              <vxe-column field="product_name" title="布行面料名称"></vxe-column>
              <vxe-column field="degree_of_staining_code" title="染色程度编号"></vxe-column>
              <vxe-column field="degree_of_staining_name" title="染色程度名称"></vxe-column>
              <vxe-column field="label_color_name" title="码卡颜色"></vxe-column>
              <vxe-column field="fabric_sum" title="成品数量"></vxe-column>
              <vxe-column field="fabric_label_weight_sum" title="成品重量"></vxe-column>
              <vxe-column field="pi_sum" title="配坯数量"></vxe-column>
              <vxe-column field="xima_sum" title="配坯重量"></vxe-column>
              <vxe-column field="kongcha" title="空差"></vxe-column>
              <vxe-column field="tube_weight" title="纸管"></vxe-column>
              <vxe-column field="loss_rate" title="损耗率"></vxe-column>
              <vxe-column field="remarks" title="备注"></vxe-column>
            </vxe-table>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="product_name" title="布行面料名称"></vxe-column>
      <vxe-column field="degree_of_staining_code" title="染色程度编号"></vxe-column>
      <vxe-column field="degree_of_staining_name" title="染色程度名称"></vxe-column>
      <vxe-column field="avg_loss_rate" title="平均损耗率"></vxe-column>
    </vxe-table>
  </div>
</template>
<script>
import { expandRowsH,expandRowsD } from "@/exclude-folder/services/DataService1"; // 假设这是你的 API 服务

export default {
  name: "ExpandRows",
  data () {
    return {
      loading: true,
      loading2: true,
      tableHeight: 0, // 响应式属性，用于存储表格高度
      tableData: [], // 初始化为空数组
      rowData2Map: {}, // 用于存储每行name对应的tableData2
      startDate: '',
      endDate: '',

    }
  },
  async created() {
    try {
      const currentDate = new Date().toISOString().split('T')[0];
      this.startDate = currentDate;
      this.endDate = currentDate;
      this.expandRows(this.startDate,this.endDate);

      this.loading = false;
    } catch (error) {
      this.loading = false;
      console.error('获取tableData失败:', error);
    }
  },
  async mounted () {
    document.title = '损耗监控看板';
    this.setWindowHeight(); // 设置初始高度
    window.addEventListener('resize', this.setWindowHeight); // 监听窗口大小变化

    const currentDate = new Date().toISOString().split('T')[0];
    this.startDate = currentDate;
    this.endDate = currentDate;
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setWindowHeight); // 组件销毁前移除监听器
  },
  methods:{
    handleSearch() {
      this.expandRows(this.startDate,this.endDate);

      // 如果需要，你可以在这里重置加载状态或执行其他操作
      this.loading = false;
    },
    async expandRows(startDate,endDate) {
      // 获取接口数据
      const res = await expandRowsH(startDate,endDate);
      const size = res.length;
      for (let index = 0; index < size; index++) {
        this.tableData.push({
          product_code: res[index].product_code,
          product_name: res[index].product_name,
          degree_of_staining_code: res[index].degree_of_staining_code,
          degree_of_staining_name: res[index].degree_of_staining_name,
          avg_loss_rate: res[index].avg_loss_rate,
        });
      }

      // 假设tableData已经加载完成，现在为每行数据加载tableData2
      for (let row of this.tableData) {
        this.loadTableData2(
            row.product_code,row.degree_of_staining_code,
            startDate,endDate
        );
      }

    },
    async loadTableData2(product_code,degree_of_staining_code,startDate,endDate) {
      // 假设获取tableData2的接口地址是'api/tableData2/:id'
      try {
        const res2 = await expandRowsD(product_code,degree_of_staining_code,startDate,endDate);

        const key = `${product_code}#${degree_of_staining_code}`;

        // 检查 key 是否已经在 rowData2Map 中，如果没有则初始化为空数组
        if (!this.rowData2Map[key]) {
          this.rowData2Map[key] = [];
        }

        const size = res2.length;
        for (let index = 0; index < size; index++) {
          this.rowData2Map[key].push({
            dyelot_code: res2[index].dyelot_code,
            product_code: res2[index].product_code,
            product_name: res2[index].product_name,
            degree_of_staining_code: res2[index].degree_of_staining_code,
            degree_of_staining_name: res2[index].degree_of_staining_name,
            label_color_name: res2[index].label_color_name,
            fabric_sum: res2[index].fabric_sum,
            fabric_label_weight_sum: res2[index].fabric_label_weight_sum,
            pi_sum: res2[index].pi_sum,
            xima_sum: res2[index].xima_sum,
            kongcha: res2[index].kongcha,
            tube_weight: res2[index].tube_weight,
            loss_rate: res2[index].loss_rate,
            remarks: res2[index].remarks,
          });
        }
        this.loading2 = false;
      } catch (error) {
        this.loading = false;
        console.error(`获取product_code和degree_of_staining_code为${product_code}#${degree_of_staining_code}的tableData2失败:`, error);
      }
    },
    setWindowHeight() {
      // 计算可用高度，这里只是一个示例，你可能需要根据你的布局进行调整
      const windowHeight = window.innerHeight;
      // 假设你要留给表格之外的内容（如页眉、页脚等）100px的高度
      this.tableHeight = windowHeight - 95;
    },
  },
}
</script>
<style scoped>
.expand-wrapper {
  padding: 20px;
}
.search-form {
  margin-bottom: 10px;
}
</style>